<template>
  <div class="search_contaner padd100">
    <el-row>
      <el-col>
        <div class="search_input_wrapper">
          <el-input v-model="keywords" @keyup.enter="search" placeholder="请输入搜索内容">
            <template #append>
              <el-button :icon="Search" @click="search" />
            </template>
          </el-input>
        </div>
        <div class="s_res">搜索“{{ route.params.s }}”，找到 <span class="count">{{page.total}}</span> 个
            <template v-if="type == 1">
              单曲
            </template>
            <template v-else-if="type == 100">
              歌手
            </template>
            <template v-else-if="type == 10">
              专辑
            </template>
            <template v-else-if="type == 1014">
              视频
            </template>
            <template v-else-if="type == 1000">
              歌单
            </template>
            <template v-else-if="type == 1002">
              用户
            </template>
        </div>
        <div class="tabs_wrapper">
          <el-tabs type="border-card" v-model="type" @tab-click="tabClick">
            <el-tab-pane label="单曲" name="1">
              <div v-show="page.total > 0">
                <MusicTable :tracks="searchData.songs" />
                <div class="pageination_center" style="margin-top:40px">
                  <el-pagination background layout="prev, pager, next" :total="page.total"
                    v-model:currentPage="page.pageNum" :page-size="page.pageSize" @current-change="handleCurrentChange" />
                </div>
              </div>
              <el-empty v-show="page.total == 0" description="很抱歉，未能找到相关搜索结果！" />
            </el-tab-pane>
            <el-tab-pane label="歌手" name="100">
              <div v-show="page.total > 0">
                <el-row :gutter="20">
                  <el-col :lg="3" :sm="6" :md="6" :xs="12" style="margin-bottom:20px"
                    v-for="(item,index) in searchData.artists" :key="item">
                    <Singer :name="item.name" :id="item.id" :picUrl="item.picUrl+ '?param=296y150'"
                      :userid="item.accountId" />
                  </el-col>
                </el-row>
                <div class="pageination_center" style="margin-top:40px">
                  <el-pagination background layout="prev, pager, next" :total="page.total"
                    v-model:currentPage="page.pageNum" :page-size="page.pageSize"
                    @current-change="handleCurrentChange" />
                </div>
              </div>
              <el-empty v-show="page.total == 0" description="很抱歉，未能找到相关搜索结果！" />
            </el-tab-pane>
            <el-tab-pane label="专辑" name="10">
              <div v-show="page.total > 0">
                <el-row :gutter="20">
                  <el-col :lg="3" :sm="6" :md="6" :xs="12" style="margin-bottom:20px"
                    v-for="(item,index) in searchData.albums" :key="item">
                    <CdMusic :picUrl="item.picUrl" :name="item.name" :id="item.id" :artists="item.artists"
                      @handleClickToAlbumDetail="(id:number)=>{router.push({name:'album-detail',params:{id}})}"
                      @handleClickToArtistDetail="(id:number)=>{router.push({name:'artist-detail',params:{id}})}" />
                  </el-col>
                </el-row>
                <div class="pageination_center" style="margin-top:40px">
                  <el-pagination background layout="prev, pager, next" :total="page.total"
                    v-model:currentPage="page.pageNum" :page-size="page.pageSize"
                    @current-change="handleCurrentChange" />
                </div>
              </div>
              <el-empty v-show="page.total == 0" description="很抱歉，未能找到相关搜索结果！" />
            </el-tab-pane>
            <el-tab-pane label="视频" name="1014">
              <div v-show="page.total > 0">
                <el-row :gutter="20">
                  <el-col :lg="3" :sm="6" :md="6" :xs="12" style="margin-bottom:20px"
                    v-for="(item,index) in searchData.videos" :key="item">
                    <Mv :name="item.title" :picUrl="item.coverUrl" :playTime="item.playTime"
                      :durationms="item.durationms" :singers="item.creator" />
                  </el-col>
                </el-row>
                <div class="pageination_center" style="margin-top:40px">
                  <el-pagination background layout="prev, pager, next" :total="page.total"
                    v-model:currentPage="page.pageNum" :page-size="page.pageSize"
                    @current-change="handleCurrentChange" />
                </div>
              </div>
              <el-empty v-show="page.total == 0" description="很抱歉，未能找到相关搜索结果！" />
            </el-tab-pane>
            <!-- version 2.0 -->
            <!-- <el-tab-pane label="歌词">Task</el-tab-pane> -->
            <el-tab-pane label="歌单" name="1000">
              <div class="search_table_container" v-show="page.total > 0">
                <el-table :data="searchData.playlists" style="width: 100%">
                  <!-- <el-table-column prop="index" width="74" show-overflow-tooltip>
                    <template #default="scope">
                      <div class="music_table_index">
                        <el-icon :size="17" class="cursor_class">
                          <VideoPlay />
                        </el-icon>
                      </div>
                    </template>
                  </el-table-column> -->
                  <el-table-column show-overflow-tooltip width="100">
                    <template #default="scope">
                      <div class="table_img cursor_class" @click="()=>{router.push({name:'play-list-detail',params:{id:scope.row.id}})}">
                        <img
                          :src="scope.row.coverImgUrl+ '?param=180y180'"
                          alt="">
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="歌单名" width="" show-overflow-tooltip>
                    <template #default="scope">
                      <a :href="'/discover/play-list-detail/' + scope.row.id" class="text_decoration">{{
                      scope.row.name
                      }}</a>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量" width="180" show-overflow-tooltip prop="trackCount"/>
                  <el-table-column label="创建人" show-overflow-tooltip>
                    <template #default="scope">
                      <span style="margin-right:4px;color:#666">by</span>
                      <a :href="'/user-home/' + scope.row.creator.userId" class="text_decoration">{{
                      scope.row.creator.nickname
                      }}</a>
                    </template>
                  </el-table-column>
                  <el-table-column label="收藏" width="180" show-overflow-tooltip prop="bookCount"/>
                  <el-table-column label="收听" width="180" show-overflow-tooltip prop="playCount"/>
                </el-table>
                <div class="pageination_center" style="margin-top:40px">
                  <el-pagination background layout="prev, pager, next" :total="page.total"
                    v-model:currentPage="page.pageNum" :page-size="page.pageSize"
                    @current-change="handleCurrentChange" />
                </div>
              </div>
              <el-empty v-show="page.total == 0" description="很抱歉，未能找到相关搜索结果！" />
            </el-tab-pane>
            <!-- version 2.0 -->
            <!-- <el-tab-pane label="声音主播">Task</el-tab-pane> -->
            <el-tab-pane label="用户" name="1002">
              <div class="search_table_container" v-show="page.total > 0">
                <el-table :data="searchData.userprofiles" style="width: 100%">
                  <el-table-column show-overflow-tooltip width="100">
                    <template #default="scope">
                      <div class="table_img cursor_class" @click="()=>{router.push({name:'user-home',params:{id:scope.row.userId}})}">
                        <img
                          :src="scope.row.avatarUrl + '?param=180y180'"
                          alt="">
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="用户名" width="" show-overflow-tooltip>
                    <template #default="scope">
                      <a :href="'/user-home/' + scope.row.userId" class="text_decoration">{{
                      scope.row.nickname
                      }}</a>
                    </template>
                  </el-table-column>
                  <el-table-column prop="playlistCount" label="歌单" width="180" show-overflow-tooltip />
                  <el-table-column label="粉丝" width="180" show-overflow-tooltip prop="followeds"/>
                </el-table>
                <div class="pageination_center" style="margin-top:40px">
                  <el-pagination background layout="prev, pager, next" :total="page.total"
                    v-model:currentPage="page.pageNum" :page-size="page.pageSize"
                    @current-change="handleCurrentChange" />
                </div>
              </div>
              <el-empty v-show="page.total == 0" description="很抱歉，未能找到相关搜索结果！" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
  <Collection ref="collectionRef" />
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue"
import { useRoute } from "vue-router";
import { Plus, VideoPlay, Search } from '@element-plus/icons-vue'
import router from '@/router';
import MusicTable from "@/components/MusicTable";
import Singer from "@/components/Singer/index.vue";
import CdMusic from "@/components/CdMusic";
import Mv from "@/components/Mv";
import { collectionTypeRef } from "@/types/collection";
import type { TabsPaneContext } from 'element-plus'
import * as searchApi from "@/api/search";
const route = useRoute()
const keywords = ref<string | string[]>('')
const type = ref<any>('1')
const page = reactive({
  pageNum: 1, // 当前页数
  pageSize: 32, // 每页显示多少条
  total: 0 // 总页数
})
const searchData = reactive<any>({})
const collectionRef = ref<collectionTypeRef | null>(null)
// 歌单列表是否显示时长
const showTableTime = ref(true)
const rowId = ref('')
/**
 * 歌单列表表格鼠标移入单元格事件
 */
const handleMouseEnterTableCell = (row: any, column: any, cell: any, event: any) => {
  showTableTime.value = true
  rowId.value = row.id
}
/**
 * 歌单列表表格鼠标移出单元格事件
 */
const handleMouseLeaveTableCell = (row: any, column: any, cell: any, event: any) => {
  showTableTime.value = false
  rowId.value = ''
}
const tabClick = (tab: TabsPaneContext, event: Event) => {
  if(keywords.value == '') keywords.value = route.params.s
  type.value = tab.props.name
  // 重置页数
  page.pageNum = 1
  page.total = 0
  search()
  // router.push(`/search/${keywords.value}?type=${type.value}`)
}
// 搜索
const search = () => {
  if(keywords.value == '') keywords.value = route.params.s
  router.push(`/search/${keywords.value}?type=${type.value}`)
  getData()
}
const getData = async () => {
  try {
    const data: any = await searchApi.search({ keywords: keywords.value, limit: page.pageSize, offset: (page.pageNum - 1) * page.pageSize, type: type.value })
    // searchData.value = data.result
    if (type.value == 1) {
      page.total = data.result.songCount || 0
      searchData.songs = data.result.songs || []
    } else if (type.value == 100) {
      page.total = data.result.artistCount || 0
      searchData.artists = data.result.artists || []
    } else if (type.value == 10) {
      page.total = data.result.albumCount || 0
      searchData.albums = data.result.albums || []
    } else if (type.value == 1014) {
      page.total = data.result.videoCount || 0
      searchData.videos = data.result.videos || []
    } else if(type.value == 1002){
      page.total = data.result.userprofileCount || 0
      searchData.userprofiles = data.result.userprofiles || []
    } else if(type.value == 1000){
      page.total = data.result.playlistCount || 0
      searchData.playlists = data.result.playlists || []
    }
  } catch (error) {
    console.log(error);
  }
}
const handleCurrentChange = (val: number) => {
  page.pageNum = val
  getData()
}
onMounted(() => {
  keywords.value = route.params.s
  type.value = route.query.type || '1'
  getData()
})
watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
  console.log('路由变化了哦');
  getData()
})
watch(() => route.query.type, (newValue, oldValue) => {
  console.log('路由变化了哦');
  // location.reload()
  let types = route.query.type
  type.value = types
  getData()
})
</script>
<style lang="scss" scoped>
:deep(.el-tabs--border-card>.el-tabs__header) {
  display: flex;
  justify-content: center;
}

.search_contaner {
  margin-top: 20px;

  .search_input_wrapper {
    width: 50%;
    margin: 0 auto;
    margin-bottom: 40px;
  }

  .s_res {
    font-size: 12px;
    color: #999;

    .count {
      color: #409eff;
    }
  }

  .tabs_wrapper {
    margin-top: 20px;
  }
}


.search_table_container {
  .music_table_index {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-icon {
      &:hover {
        color: #409eff;
      }
    }
  }

  .table_img {
    width: 100%;
    height: 50px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  a {
    color: #333;

    &:hover {
      color: #333;
    }
  }
}
</style>
